<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <img
          src="@/assets/logo.png"
          alt="logo.png"
          width="35"
          height="35"
          style="vertical-align: middle"
        />
        <span style="vertical-align: middle">商品列表</span>
      </div>
    </template>

    <el-row :gutter="10">
      <el-col :span="4">
        <el-input
          placeholder="请输入搜索关键词"
          v-model="searchContent"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handlerSearch">搜索</el-button>
        <el-button type="primary" @click="DialogVisible = true">添加</el-button>
      </el-col>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="编号" width="180">
          <template #default="scope">
            <i class="el-icon-time" /><span style="margin-left: 10px">{{
              scope.row.id
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商品名称" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top">
              <template #default>
                <p>商品名称: {{ scope.row.title }}</p>
                <p>商品价格: {{ scope.row.price }}</p>
              </template>
              <template #reference>
                <div class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.title }}</el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="商品图片" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">
              <img
                :src="url + scope.row.thumbnail"
                alt=""
                width="180"
                height="180"
              />
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="PageChange"
        small
      />
    </el-row>
    <add-product
      v-model="DialogVisible"
      @response="responseDetail"
    ></add-product>

    <edit-product
      v-if="editDialogVisible"
      v-model="editDialogVisible"
      @response="responseDetail"
      :pid="pid"
    ></edit-product>
  </el-card>
</template>

<script lang='js'>
import { defineComponent, reactive, onMounted, toRefs, ref } from "vue";
import addProduct from "@/view/goods/addProduct.vue";
import editProduct from "@/view/goods/editProduct.vue";
import { ElMessageBox, ElNotification, ElMessage } from 'element-plus';
import {goodsList,delGoods,findGoods} from '../../api/goodsApi.js'
export default defineComponent({
  name: "~home",
  components: { addProduct, editProduct },
  setup(props, { emit }) {
    const state = reactive({
      searchContent: '',
      tableData: [],
      DialogVisible: false,
      editDialogVisible: false,
      url: import.meta.env.VITE_APP_URL,
      pid: 0,
  async loadData(){
  const params = { pageNumber: state.currentPage, pageSize: state.pageSize, search: state.searchContent };
  goodsList(params).then((res)=>{
console.log(res);
state.tableData = res.data.list;
  state.total = res.data.totalCount;
  })
  
},
      responseDetail() {
        state.loadData();
      },
      total: '',
      pageSize: 3,
      currentPage: 1,
      PageChange(val) {
        state.currentPage = val;
        state.loadData();
      },
    async  handleDelete(index, row){
            const confirmResult = await ElMessageBox.confirm('确定要删除该数据?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err)
    if (confirmResult !== 'confirm') return ElMessage.info('取消删除！');
const params = { id: row.id }
delGoods(params).then((res)=>{
console.log(res);
if (res.code === 'ok') ElNotification({ title: '成功', message: '删除成功', type: "success", duration: 2000 });
    state.loadData()
})

      },
  async handlerSearch(){
    state.currentPage = 1;
      const params = { pageNumber: state.currentPage, pageSize: state.pageSize, search: state.searchContent }
     
     findGoods(params).then((res)=>{
       console.log(res);
       state.tableData = res.data.list;
      state.total = res.data.totalCount;
     })
      },
      handleEdit(index, row){
 state.editDialogVisible = true;
    state.pid = row.id;
      }
    });
    state.loadData()

    return {
      ...toRefs(state)
    };
  }
});
</script>

<style lang='css' scoped>
</style>
